<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">

    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    };

    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: '/sys/role/getlist',
            response: {
                statusCode: 200 //规定成功的状态码，默认：0
                , countName: 'total' //规定数据总数的字段名称，默认：count
            },
            cols: [
                [
                    {type: "checkbox", width: "10%"},
                    {field: 'name', width: "25%", title: '角色名称'},
                    {field: 'deptName', width: "25%", title: '所属部门'},
                    {field: 'description', title: '描述', width: "40%", align: "center"}
                ]
            ],
            done: function (res, page, count) {
                $.ajax({
                    type: "get",
                    url: "/sys/user/role",
                    dataType: "json",
                    traditional: true,
                    data: {"id": getQueryString('id')},
                    success: function (res1) {
                        //可以自行添加判断的条件是否选中
                        var data = res.data;
                        var data1 = res1.data;
                        for (var i = 0; i < data.length; i++) { //循环表格数据
                            var d1 = data[i];
                            for (var j = 0; j < data1.length; j++) {    //循环选择数据
                                var id1 = data1[j];
                                if (d1.id == id1) {           //表格数据一致
                                    //这句才是真正选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中
                                    d1["LAY_CHECKED"] = 'true';
                                    //下面三句是通过更改css来实现选中的效果
                                    var index = d1['LAY_TABLE_INDEX'];
                                    $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                    $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                    break;
                                }
                            }
                        }
                    },
                    error: function (data) {
                        layer.closeAll();
                        layer.msg(data);
                    }
                });
            },
            id: 'roleTableId',
            skin: 'row'
        });
    });

</script>

</body>
</html>